<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 40px;
        border: 1px solid pink;
        text-align: center;
        line-height: 40px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      //   const date = new Date();
      //   // 获取年
      //   console.log(date.getFullYear());
      //   // 获取月 月份+1
      //   console.log(date.getMonth() + 1);
      //   // 获取日
      //   console.log(date.getDate());
      //   // 获取星期
      //   console.log(date.getDay());
      //   // 获取小时
      //   console.log(date.getHours());
      //   // 获取分钟
      //   console.log(date.getMinutes());
      //   // 获取秒
      //   console.log(date.getSeconds());
      //   // 获取毫秒
      //   console.log(date.getMilliseconds());
      //   // 年/月/日/星期/小时/分钟/秒
      //   console.log(date.toLocaleString());
      //   // 年/月/日
      //   console.log(date.toLocaleDateString());
      //   // 小时:分钟:秒
      //   console.log(date.toLocaleTimeString());

      // 显示格式化时间
      const div = document.querySelector("div");
      function getMyDate() {
        const date = new Date();
        // 时间补零
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        h = h < 10 ? "0" + h : h;
        m = m < 10 ? "0" + m : m;
        s = s < 10 ? "0" + s : s;

        return `${date.getFullYear()}年${
          date.getMonth() + 1
        }月${date.getDate()}日 ${h}:${m}:${s}`;
      }
      div.innerHTML = getMyDate();

      setInterval(function () {
        div.innerHTML = getMyDate();
      }, 1000);
    </script>
  </body>
</html>
